<template>
    <div class='knowledge-list'>
        <public-head>
            <span>行业知识</span>
        </public-head>
        <ul v-if="knowledgeLists.length">
            <router-link :to="{path:'/knowledge/'+ knowledge.id}" tag="li" v-for="(knowledge,index) in knowledgeLists" :key="knowledge.id">
                <div class="left">
                    <img :src="knowledge.img">
                </div>
                <div class="right">
                    <h2 class="title">{{ knowledge.title }}</h2>
                    <p class="introduce">{{ knowledge.intro.substr(0,40) }}</p>
                </div>
            </router-link>
        </ul>
        <noitem v-else>
            <p slot="tip">暂无行业知识</p>
        </noitem>
        <loading v-if="is_loading"></loading>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            knowledgeLists: []
        }
    },
    created() {
        this.isLoading(true)
        this.axios.get(root + '/api/industry/knowledgeList').then((res)=>{
            this.isLoading(false)
            this.knowledgeLists = res.data.data.knowledgeList
        })
    },
    methods: {
        ...mapActions(['isLoading'])
    },
    computed: {
        ...mapState(['is_loading'])
    }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.knowledge-list {
    .init;
    li {
        display: -webkit-flex;
        background: #fff;
        padding: .24rem .29rem;
        box-shadow: 0 3px 5px 0 #d0d0d0;
        margin-top: .2rem;
        .left {
            .wh(1.52rem, 1.52rem);
            margin-right: .29rem;
            img {
                .wh(100%, 100%);
                border-radius: 2px;
            }
        }
        .right {
            flex: 1;
            .ft(.24rem);
            .title {
                width: 5rem;
                color: #404040;
                line-height: 0.3rem;
                margin-bottom: .18rem;
                margin-top: .1rem;
                .textoverflow;
            }
            .introduce {
                color: #999;
                line-height: .45rem;
            }
        }
    }
}
</style>